현대 프레임워크 파일 형식

작성일 : 2025.01.08

1. JSX (JavaScript XML)

JSX는 React에서 시작된 JavaScript 확장 문법입니다. JavaScript 코드 안에서 HTML과 유사한 마크업을 직접 작성할 수 있게 해주는데, 이는 UI 컴포넌트를 더 직관적으로 표현할 수 있게 합니다. JSX는 빌드 과정에서 일반 JavaScript 함수 호출로 변환됩니다. 예를 들어 <div>Hello</div>는 React.createElement('div', null, 'Hello')로 변환됩니다.

jsx example

// UserProfile.jsx
import React, { useState } from 'react';

function UserProfile({ name }) {
  // 상태 관리를 위한 useState 훅 사용
  const [isEditing, setIsEditing] = useState(false);
  
  return (
    <div className="profile">
      {isEditing ? (
        <input 
          type="text" 
          value={name}
          onChange={e => console.log(e.target.value)} 
        />
      ) : (
        <h2>{name}님, 환영합니다!</h2>
      )}
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? '저장' : '수정'}
      </button>
    </div>
  );
}

2. TSX (TypeScript XML)

TSX는 TypeScript 환경에서 JSX를 사용할 수 있게 해주는 확장자입니다. TypeScript의 정적 타입 검사 기능을 React 컴포넌트에 적용할 수 있어서, 개발 단계에서 많은 잠재적 오류를 미리 발견할 수 있습니다. 특히 컴포넌트의 props나 상태 관리에서 타입 안정성을 제공하여 대규모 애플리케이션 개발에 매우 유용합니다.

tsx example

// UserProfile.tsx
import React, { useState } from 'react';

// 타입 정의
interface UserProfileProps {
  name: string;
  age: number;
  email?: string; // 선택적 prop
}

const UserProfile: React.FC<UserProfileProps> = ({ name, age, email }) => {
  const [isAdult, setIsAdult] = useState<boolean>(age >= 18);

  return (
    <div className="profile">
      <h2>사용자 정보</h2>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
      {email && <p>이메일: {email}</p>}
      <p>{isAdult ? '성인입니다' : '미성년자입니다'}</p>
    </div>
  );
};

3. MDX (Markdown + JSX)

MDX는 마크다운 문서 안에서 JSX 컴포넌트를 사용할 수 있게 해주는 형식입니다. 문서 작성의 편의성과 React 컴포넌트의 재사용성을 동시에 얻을 수 있습니다. 기술 문서, 블로그 포스트, 교육 자료 등을 작성할 때 특히 강력한 도구가 됩니다.

mdx example

// BlogPost.mdx
import { Chart } from './Chart'
import { Alert } from './Alert'

# 2024년 리액트 개발 트렌드

오늘은 리액트 개발의 최신 트렌드에 대해 알아보겠습니다.

<Alert type="info">
  이 글은 2024년 1월 기준으로 작성되었습니다.
</Alert>

## 사용률 통계
아래 차트를 통해 프레임워크별 사용률을 확인할 수 있습니다.

<Chart data={frameworkUsageData} />

- React: 40%
- Vue: 30%
- Angular: 20%

4. Astro

Astro 파일은 서버 사이드 로직과 클라이언트 사이드 UI를 명확하게 구분하는 구조를 가지고 있습니다. 프론트매터(frontmatter) 영역에서 서버 로직을 작성하고, 그 아래에서 UI를 정의합니다. Astro는 기본적으로 정적 HTML을 생성하여 매우 빠른 초기 페이지 로딩을 제공합니다.

Astro example

---
// BlogLayout.astro
// 프론트매터 영역에서 데이터와 컴포넌트를 가져옵니다
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';

const { title, author } = Astro.props;
const posts = await getBlogPosts();
---

<html lang="ko">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <Header />
    <main>
      <h1>{title}</h1>
      <p>작성자: {author}</p>
      
      <ul>
        {posts.map(post => (
          <li>
            <a href={post.url}>{post.title}</a>
          </li>
        ))}
      </ul>
    </main>
    <Footer />
  </body>
</html>

5. Vue (SFC - Single File Component)

Vue 파일은 template, script, style 세 섹션으로 구성된 단일 파일 컴포넌트입니다. 각 부분이 명확하게 구분되어 있어 코드 구조화가 쉽고, 스코프가 지정된 CSS를 사용할 수 있어 스타일 충돌 문제를 방지할 수 있습니다. TypeScript를 사용할 수 있으며, 컴포지션 API를 통해 로직 재사용성을 높일 수 있습니다.

vue example

<!-- UserDashboard.vue -->
<template>
  <div class="dashboard">
    <h1>{{ userName }}의 대시보드</h1>
    <div class="stats">
      <div v-for="stat in stats" :key="stat.id" class="stat-item">
        <h3>{{ stat.label }}</h3>
        <p>{{ stat.value }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Stat {
  id: number
  label: string
  value: number
}

const userName = ref('김철수')
const stats = ref<Stat[]>([
  { id: 1, label: '총 방문수', value: 1234 },
  { id: 2, label: '오늘 방문수', value: 56 }
])
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
</style>

6. Svelte

Svelte 파일은 매우 간결한 문법을 특징으로 합니다. 반응형 상태 관리가 매우 직관적이며, 컴파일 시점에 최적화된 JavaScript 코드를 생성합니다. 특별한 프레임워크 런타임이 필요 없어 번들 크기가 작고, 성능이 우수합니다.

<!-- Counter.svelte -->
<script>
  // 반응형 상태 선언
  let count = 0;
  // 파생된 상태 (반응형으로 자동 업데이트)
  $: doubled = count * 2;
  $: isEven = count % 2 === 0;

  function increment() {
    count += 1;
  }

  function reset() {
    count = 0;
  }
</script>

<div class="counter">
  <h1>카운터</h1>
  <p>현재 값: {count}</p>
  <p>2배 값: {doubled}</p>
  <p>{isEven ? '짝수입니다' : '홀수입니다'}</p>
  
  <button on:click={increment}>
    증가
  </button>
  <button on:click={reset}>
    리셋
  </button>
</div>

<style>
  .counter {
    text-align: center;
    padding: 20px;
  }
  button {
    margin: 0 10px;
    padding: 8px 16px;
  }
</style>

이러한 파일 형식들은 각자의 강점이 있습니다:

JSX/TSX는 React 생태계에서 컴포넌트 기반 개발에 최적화되어 있습니다.
MDX는 문서화와 인터랙티브 콘텐츠 제작에 탁월합니다.
Astro는 정적 사이트 생성과 부분적 하이드레이션에 특화되어 있습니다.
Vue SFC는 명확한 구조와 뛰어난 개발자 경험을 제공합니다.
Svelte는 높은 성능과 간결한 코드 작성을 가능하게 합니다.

각 도구는 서로 다른 문제를 해결하기 위해 설계되었으며, 프로젝트의 요구사항에 따라 적절한 도구를 선택하는 것이 중요합니다. 이러한 다양성은 웹 개발자들이 상황에 맞는 최적의 도구를 선택할 수 있게 해줍니다.

1. JSX (JavaScript XML)​

jsx example​

2. TSX (TypeScript XML)​

tsx example​

3. MDX (Markdown + JSX)​

mdx example​

4. Astro​

Astro example​

5. Vue (SFC - Single File Component)​

vue example​

6. Svelte​